$defalut-bgcolor:#fff;
$defalut-active-bgcolor:#ecf5ff;
$defalut-color:#323233;
$defalut-active-color:#409eff;


$primary-bgcolor:#409eff;
$primary-active-bgcolor:#66b1ff;
$primary-border:#409eff;
$primary-active-border:#66b1ff;
$primary-color:#fff;
$primary-active-color:#fff;


$success-bgcolor:#67c23a;
$success-active-bgcolor:#85ce61;
$success-border:#67c23a;
$success-active-border:#85ce61;
$success-color:#fff;
$success-active-color:#fff;

$info-bgcolor:#909399;
$info-active-bgcolor:#a6a9ad;
$info-border:#909399;
$info-active-border:#a6a9ad;
$info-color:#fff;
$info-active-color:#fff;

$warning-bgcolor:#e6a23c;
$warning-active-bgcolor:#ebb563;
$warning-border:#e6a23c;
$warning-active-border:#ebb563;
$warning-color:#fff;
$warning-active-color:#fff;

$danger-bgcolor:#f56c6c;
$danger-active-bgcolor:#f78989;
$danger-border:#f56c6c;
$danger-active-border:#f78989;
$danger-color:#fff;
$danger-active-color:#fff;

$size:(
  (
    size:'normal',
    pad:12px 20px,
    fs:14px,
    radius:4px,
  )
  (
    size:'medium',
    pad:10px 20px,
    fs:14px,
    radius:4px,
  )
  (
    size:'small',
    pad:9px 15px,
    fs:12px,
    radius:3px
  )
  (
    size:'mini',
    pad:7px 15px,
    fs:12px,
    radius:3px
  )
);

$types:(
  (
    type:'default',
    bgc: $defalut-bgcolor,
    activeBgc: $defalut-active-bgcolor,
    color:$defalut-color,
    activeColor:$defalut-active-color,
  )
  (
    type:'primary',
    bgc: $primary-bgcolor,
    activeBgc: $primary-active-bgcolor,
    color:$primary-color,
    activeColor:$primary-active-color,
  )
  (
    type:'success',
    bgc: $success-bgcolor,
    activeBgc: $success-active-bgcolor,
    color:$success-color,
    activeColor:$success-active-color,
  )
  (
    type:'info',
    bgc: $info-bgcolor,
    activeBgc: $info-active-bgcolor,
    color:$info-color,
    activeColor:$info-active-color,
  )
  (
    type:'warning',
    bgc: $warning-bgcolor,
    activeBgc: $warning-active-bgcolor,
    color:$warning-color,
    activeColor:$warning-active-color,
  )
  (
    type:'danger',
    bgc: $danger-bgcolor,
    activeBgc: $danger-active-bgcolor,
    color:$danger-color,
    activeColor:$danger-active-color,
  )
);
.yj-button{
  display:inline-block;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 4px;
}
@for $i from 1 through length($types) {
  $item: nth($types, $i);
  .yj-button-#{map-get($item, type)}{
    color: map-get($item, color);
    background: map-get($item, bgc);
    &:focus,&:hover,&:focus,&:active{
      color: map-get($item, activeColor);
      border-color: map-get($item, activeColor);
      background: map-get($item, activeBgc);
    }
  }
}
@for $i from 1 through length($size) {
  $item: nth($size, $i);
  .yj-button-#{map-get($item, size)}{
    padding: map-get($item, pad);
    font-size: map-get($item, fs);
    border-radius: map-get($item,radius);
  }
}
// .yj-button-default {
//     color: #323233;
//     background-color: #fff;
//     border: 1px solid #ebedf0;
//     &:focus,&:hover,&:focus,&:active{
//       color: $primary-bgcolor;
//       border-color: #c6e2ff;
//       background-color: #ecf5ff;
//     }
//      &.is-plain{
//         background: #fff;
//         border-color: #409eff;
//         color: #409eff;
//       &:focus,&:hover{
//         color: #409eff;
//         background: #ecf5ff;
//         border-color: #b3d8ff;
//       }
//     }
// }

// .yj-button-primary {
//     color: #fff;
//     background-color: $primary-bgcolor;
//     border-color: $primary-bgcolor;
//     &:focus,&:hover,&:focus,&:active{
//       background: #66b1ff;
//       border-color: #66b1ff;
//       color: #fff;
//     }
//      &.is-plain{
//         background: #ecf5ff;
//         border-color: #409eff;
//         color: #409eff;
//       &:focus,&:hover{
//         background: #409eff;
//         border-color: #409eff;
//         color: #fff;
//       }
//     }
// }
// .yj-button-info {
//     color: #fff;
//     background-color: #909399;
//     border-color: #909399;
//     &:focus,&:hover,&:focus,&:active{
//       background: #a6a9ad;
//       border-color: #a6a9ad;
//       color: #fff;
//     }
//      &.is-plain{
//         color: #909399;
//         background: #f4f4f5;
//         border-color: #d3d4d6;
//       &:focus,&:hover{
//         background: #909399;
//         border-color: #909399;
//         color: #fff;
//       }
//     }
// }
// .yj-button-warning{
//     color: #e6a23c;
//     background: #fdf6ec;
//     border-color: #f5dab1;
//     &:focus,&:hover,&:focus,&:active{
//       background: #ebb563;
//       border-color: #ebb563;
//       color: #fff;
//     }
//      &.is-plain{
//         color: #e6a23c;
//         background: #fdf6ec;
//         border-color: #f5dab1;
//       &:focus,&:hover{
//         background: #cf9236;
//         border-color: #cf9236;
//         color: #fff;
//         outline: none;
//       }
//     }
// }

// .yj-button-danger {
//       background: #f78989;
//       border-color: #f78989;
//       color: #fff;
//     &:focus,&:hover,&:focus,&:active{
//       background: #dd6161;
//       border-color: #dd6161;
//       color: #fff;
//     }
//      &.is-plain{
//         color: #f78989;
//         background: #f4f4f5;
//         border-color: #f78989;
//       &:focus,&:hover{
//         background: #f78989;
//         border-color: #f78989;
//         color: #fff;
//       }
//     }
// }